<template>
  <view class="datetime-picker" v-if="done">
    <view class="wrap">
      <view class="picker-body">
        <picker-view :value="value" @change="_onChange" @submit="_onSubmit">
          <picker-view-column >
            <view class="column-item" v-for="item in hours" :key="item">
              {{ formatNum(item)}}
            </view>
          </picker-view-column>
		  
          <picker-view-column>
            <view class="column-item" v-for="item in minutes" :key="item">
              {{ formatNum(item)}}
            </view>
          </picker-view-column>
		  
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "datetime-picker",
  props: {
    timeLabel: {
      type: Array,
      default: () => ["点", "分"],
    },
    timeInit: {
      type: Number,
      default: new Date().valueOf(),
    },
  },

  data() {
    return {
      hours: [],
      minutes: [],
      hour: "",
      minute: "",
      value: [0,0],
	  done: false
    };
  },

  computed: {},

  mounted() {
    this.init();
  },

  watch: {
    month() {
      this.initDays();
    },
  },

  methods: {
    init() {
      this.initHours();
      this.initMinutes();
      this.setSelectValue();
      this.done = true;
    },

    initHours() {
	const hours = [];
      for (let hour = 0; hour <= 23; hour++) {
        hours.push(hour + this.timeLabel[0]);
      }
	  var hour = new Date().getHours();
	  this.$set(this.value, 0, hour);
      this.hours = hours;
    },

    initMinutes() {
	const minutes = [];
      for (let minute = 0; minute < 60; minute++) {
        minutes.push(minute + this.timeLabel[1]);
      }
	  var minute = new Date().getMinutes();
	  this.$set(this.value, 1, minute);
      this.minutes = minutes;
    },

	_onSubmit() {
	  const {
	    hour,
	    minute,
	    formatNum,
	    timeLabel,
	  } = this;
	  const result = {
	    hour: formatNum(hour),
	    minute: formatNum(minute),
	  };
		return result;
	},
	
    _onChange(e) {
      this.value = e.detail.value;
	  this.setSelectValue();
    },

    setSelectValue() {
      const v = this.value;
      this.hour = this.hours[v[0]];
      this.minute = this.minutes[v[1]];
    },

    

    formatNum(num) {
      return num < 10 ? "0" + num : num + "";
    },
  },
};
</script>

<style lang="scss">
$transition: all 0.3s ease;
$primary: #488ee9;

.datetime-picker {
  position: relative;
  picker-view {
    height: 100%;
  }
  .picker-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px;
    background-color: darken(#fff, 2%);
    background-color: #fff;
  }
  .picker-body {
    width: 100%;
    height: 420rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .column-item {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-picker {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    background-color: #eee;
    font-size: 14px;
    border-radius: 3px;
    color: #000;
    cursor: pointer;
  }
  .btn-picker.submit {
    background-color: $primary;
    color: #fff;
  }
}
</style>
